<template>
	<div>
		<div class="">
			<div class="bgff">
				<div class="clear plr20 ptb10">
					<span class="fl fz16">添加资源 &gt; <em class="fz14">软文资源</em></span>
					<a class="fr layui-btn layui-btn-sm layui-btn-normal khb-btn" href="javascript:;" onclick="javascript:this.$router.go(-1);">返回</a>
				</div>
				<div class="khb-tips fz14 mlr20">
					<div>提示1：资源提交后会在一个工作日审核,审核通过后通过可接单。</div>
					<div>提示2：如有如有疑问，请联系您的媒介、客户经理。</div>
				</div>
				<el-container class="container">

					<!--ruleForm -->
					<el-form :model="dto" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="资源logo" prop="logo">
							<el-upload class="avatar-uploader" :action="this.$glo.uploadUrl" :accept="'image/*'" name="files"
							 :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :on-progress="handleProgress"
							 :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>

						<el-form-item label="资源名称" prop="name">
							<div class="inputw50">
								<el-input class="" v-model="dto.name"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="资源摘要" prop="summary">
							<div class="inputw50">
								<el-input v-model="dto.summary"></el-input>
							</div>
						</el-form-item>

						<el-form-item label="产品标签" prop="productLabes">
							<el-checkbox-group v-model="dto.productLabes">
								<el-checkbox label="1">最新资源</el-checkbox>
								<el-checkbox label="2">急速处理</el-checkbox>
								<el-checkbox label="3">热门资源</el-checkbox>
							</el-checkbox-group>
						</el-form-item>


						<el-form-item label="接稿时间" prop="receiveStartTime">
							<el-select v-model="dto.receiveStartTime" placeholder="请选择接稿时间">
								<el-option label="周一" value="周一"></el-option>
								<el-option label="周二" value="周二"></el-option>
								<el-option label="周三" value="周三"></el-option>
								<el-option label="周四" value="周四"></el-option>
								<el-option label="周五" value="周五"></el-option>
								<el-option label="周六" value="周六"></el-option>
								<el-option label="周日" value="周日"></el-option>
							</el-select>
							至
							<el-select v-model="dto.receiveEndTime" prop="receiveEndTime" placeholder="请选择接稿时间">
								<el-option label="周一" value="周一"></el-option>
								<el-option label="周二" value="周二"></el-option>
								<el-option label="周三" value="周三"></el-option>
								<el-option label="周四" value="周四"></el-option>
								<el-option label="周五" value="周五"></el-option>
								<el-option label="周六" value="周六"></el-option>
								<el-option label="周日" value="周日"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="网站类型" prop="websiteTypes">
							<el-checkbox-group v-model="dto.websiteTypes">
								<el-checkbox label="1">门户网站</el-checkbox>
								<el-checkbox label="2">垂直行业</el-checkbox>
								<el-checkbox label="3">新闻客户端</el-checkbox>
								<el-checkbox label="4">地方门户</el-checkbox>
								<el-checkbox label="5">套餐系列</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<el-form-item label="入口级别" prop="entranceLevel">
							<el-select v-model="dto.entranceLevel" placeholder="请选择入口级别">
								<el-option label="1" value="网站首页">网站首页</el-option>
								<el-option label="2" value="频道首页">频道首页</el-option>
								<el-option label="3" value="二级频道首页">二级频道首页</el-option>
								<el-option label="4" value="三级频道首页">三级频道首页</el-option>
								<el-option label="5" value="列表页入口">列表页入口</el-option>
								<el-option label="6" value="无入口">无入口</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="频道分类" prop="channelTypes">
							<el-checkbox-group v-model="dto.channelTypes">
								<el-checkbox v-for="(item,index) in channelTypesList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<el-form-item label="收录参考" prop="inclusionReference">
							<el-checkbox-group v-model="dto.inclusionReference">
								<el-checkbox v-for="(item,index) in inclusionReferenceList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<el-form-item label="特殊行业">
							<el-checkbox-group v-model="dto.specialIndustrys">
								<el-checkbox v-for="(item,index) in specialIndustrysList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<el-form-item label="综合门户">
							<el-checkbox-group v-model="dto.integratedPortal">
								<el-checkbox v-for="(item,index) in integratedPortalList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>


						<el-form-item label="百度权重" prop="baiduWeight">
							<el-select v-model="dto.baiduWeight" placeholder="请选择百度权重">
								<el-option label="1" value="1">权重1</el-option>
								<el-option label="2" value="2">权重2</el-option>
								<el-option label="3" value="3">权重3</el-option>
								<el-option label="4" value="4">权重4</el-option>
								<el-option label="5" value="5">权重5</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="百度新闻" prop="baiduNews">
							<el-select v-model="dto.baiduNews" placeholder="请选择入口级别">
								<el-option label="1" value="是">是</el-option>
								<el-option label="0" value="否">否</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="链接类型" prop="linkType">
							<el-select v-model="dto.linkType" placeholder="请选择入口级别">
								<el-option label="1" value="否">可带链接</el-option>
								<el-option label="2" value="是">不带链接</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="图片数量" prop="imageNum">
							<el-input-number v-model="dto.imageNum"  :min="1" :max="10" label="描述文字"></el-input-number>
						</el-form-item>

						<el-form-item label="标题字数" prop="titleNum">
							<el-input-number v-model="dto.titleNum"  :min="1" :max="10" label="描述文字"></el-input-number>
						</el-form-item>

						<el-form-item label="需要来源" prop="needOrigin">
							<el-select v-model="dto.needOrigin" placeholder="请选择需要来源">
								<el-option label="1" value="1">是</el-option>
								<el-option label="0" value="0">否</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="出稿时间" prop="publishTime">
							<el-input-number v-model="dto.publishTime"  :min="1" :max="10" label="描述文字"></el-input-number>
							<span style="margin-right: 20px;"></span>
							<el-select v-model="dto.publishTimeUnit" prop="publishTimeUnit" placeholder="请选择需要来源">
								<el-option label="1" value="是">小时</el-option>
								<el-option label="2" value="否">天</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="平均时间" prop="titleNum">
							<el-input-number v-model="dto.titleNum" :min="1" :max="10" label="描述文字"></el-input-number>
						</el-form-item>

						<el-form-item label="案例链接" prop="caseLink">
							<div class="inputw50">
								<el-input v-model="dto.caseLink" placeholder="请输入案例链接"></el-input>
							</div>
						</el-form-item>

						<el-form-item label="认证类型" prop="authType">
							<el-radio-group v-model="dto.authType">
								<el-radio label="1">个人认证</el-radio>
								<el-radio label="2">企业认证</el-radio>
								<el-radio label="3">一手认证</el-radio>
								<el-radio label="3">独家认证</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="开通城市">
							<div class="inputw50">
								<el-input v-model="dto.openCity" placeholder="请输入开通城市"></el-input>
							</div>
						</el-form-item>

						<el-form-item label="上下架" prop="upUnderShelf">
							<el-radio-group v-model="dto.upUnderShelf">
								<el-radio disabled label="0">下架</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="备注说明" prop="remarkDesc">
							<div class="inputw50">
								<el-input type="textarea" placeholder="请输入内容" v-model="dto.remarkDesc" maxlength="999" show-word-limit>
								</el-input>
							</div>
						</el-form-item>

						<el-form-item label="基本价格" prop="basicPrice">
							<div class="inputw50">
								<el-input v-model="dto.basicPrice" placeholder="价格"></el-input>
							</div>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
						</el-form-item>
					</el-form>


				</el-container>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				dto: {
					id: "", //资源id
					logo: '', //资源logo
					name: '', //资源名称
					summary: "", // 资源摘要 
					productLabes: [], // 产品标签,1:最新资源;2:急速处理;3:热门资源，多个以逗号分隔 ,
					receiveStartTime: '周一', //接稿开始时间 ,
					receiveEndTime: '周一', //接稿结束时间 ,
					websiteTypes: [], //网站类型,1:门户网站;2:垂直行业;3:新闻客户端;4:地方门户;5:套餐系列,多个以逗号分隔
					entranceLevel: '', //入口级别,多个以逗号分隔 ,
					channelTypes: [], //频道分类,
					inclusionReference: [], //收录参考,1:新闻源;2:网页收录;3:百度收录;4:包网页收录;5:包新闻源收录;6:不包收录;多个以逗号分隔 
					specialIndustrys: [], //特殊行业,1:P2P;2:金融;3:微商;4:健康;5:加盟;6:留学;7:无;多个以逗号分隔 ,
					integratedPortal: [], //综合门户,
					baiduWeight: "", //百度权重,1-7 ,
					baiduNews: "", //百度新闻,0:否;1:是; 
					linkType: "", //链接类型,1:可带链接;2:不带链接; ,
					imageNum: "", //图片数量 ,
					titleNum: "", //标题字数 ,
					needOrigin: "", //需要来源,0:否;1:是; ,
					publishTime: "", // 出稿时间 ,
					publishTimeUnit: "", // 出稿时间单位,1:小时;2:天; ,
					averageTime: "", //平均时间 ,
					caseLink: "", //案例链接 ,
					authType: "", //认证类型,1:个人认证;2:企业认证;3:一手认证;4:独家认证 ,
					openCity: "", //开通城市,存城市编码,多个以逗号分隔 ,
					openCityStr :"",//开通城市文本
					upUnderShelf: "0", //上下架,0:待上架;1:已上架；3:已下架（写死传0） ,
					remarkDesc: "", // 备注说明
					basicPrice: "", //基本价格 ,
				},
				//频道分类数组
				channelTypesList: ['新闻', '财经', 'IT', '科技', '娱乐', '旅游', '教育', '房产', '家居', '汽车', '女性',
					'时尚', '美容', '母婴育儿', '健康', '艺术', '家电数码', '游戏动漫', '体育', '资讯', '生活', '食品', '文化环保',
					'公益', '法律', '门户', '报业', '区块链', '工业贸易'
				],
				//收录参考数组
				inclusionReferenceList: ['新闻源', '网页收录', '百度收录', '包网页收录', '包新闻源收录', '不包收录'],
				//特殊行业数组
				specialIndustrysList: ['P2P', '金融', '微商', '健康', '加盟', '留学', '无'],
				//综合门户数组
				integratedPortalList: [
					'新浪网', '网易', '搜狐网', '腾讯网', '凤凰网', '中华网', '中国网', '环球网', '人民网', '新华网',
					'中国新闻网(中新网)', '光明网', '中国日报网', '国际在线', '中国青年网', '北青网', '慧聪网', '大众网',
					'央广网(中国广播网)', '中国经济网', '千龙网', '中青在线'
				],

				rules: {
					logo: [{
						required: true,
						message: '请上传资源LOGO'
					}, ],
					name: [{
							required: true,
							message: '请输入资源名称',
							trigger: 'blur'
						},
						{
							max: 50,
							message: '长度在50个字符之内',
							trigger: 'blur'
						}
					],
					summary: [{
						max: 255,
						message: '长度在50个字符之内',
						trigger: 'blur'
					}],
					productLabes: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					receiveStartTime: [{
						required: true,
						message: '接稿时间',
						trigger: 'change'
					}],
					receiveEndTime: [{
						required: true,
						message: '接稿时间',
						trigger: 'change'
					}],
					websiteTypes: [{
						type: 'array',
						required: true,
						message: '请至少选择一个网站类型',
						trigger: 'change'
					}],
					entranceLevel: [{
						required: true,
						message: '请选择入口级别',
						trigger: 'change'
					}],
					channelTypes: [{
						type: 'array',
						required: true,
						message: '请至少选择一个频道分类',
						trigger: 'change'
					}],
					inclusionReference: [{
						type: 'array',
						required: true,
						message: '请至少选择一个收录参考',
						trigger: 'change'
					}],
					baiduWeight: [{
						required: true,
						message: '请选择百度权重',
						trigger: 'change'
					}],
					baiduNews: [{
						required: true,
						message: '请选择百度新闻',
						trigger: 'change'
					}],
					linkType: [{
						required: true,
						message: '请选择链接类型',
						trigger: 'change'
					}],
					imageNum: [{
						required: true,
						message: '请输入图片数量',
						trigger: 'blur'
					}, ],
					titleNum: [{
						required: true,
						message: '请输入标题字数',
						trigger: 'blur'
					}, ],
					needOrigin: [{
						required: true,
						message: '请选择需要来源',
						trigger: 'change'
					}, ],
					publishTime: [{
						required: true,
						message: '请输入填写最快出稿时间',
						trigger: 'blur'
					}, ],
					publishTimeUnit: [{
						required: true,
						message: '请选择出稿时间单位',
						trigger: 'change'
					}, ],
					caseLink: [{
						required: true,
						message: '请输入案例链接',
						trigger: 'blur'
					}, ],
					authType: [{
						required: true,
						message: '请选择需要来源',
						trigger: 'change'
					}, ],
					upUnderShelf: [{
						required: true
					}],
					remarkDesc: [{
						required: true,
						message: '请输入备注说明',
						trigger: 'blur'
					}],
					basicPrice: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}, ]


				}
			}
		},
		created() {},
		methods: {
			//图片上传成功返回
			handleAvatarSuccess(res, file) {
				//this.imageUrl = URL.createObjectURL(file.raw);
				this.imageUrl = res[0].url;
				this.dto.logo = res[0].url;
			},
			//图片上传失败返回
			handleAvatarError(err, file) {
				console.log(err)
			},
			//上传时执行loading事件
			handleProgress(event, file, fileList) {
				this.loading = true; 
			},
			//上传之前判断
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/*';
				const isLt2M = file.size / 1024 / 1024 < 2;
				// if (!isJPG) {
				//   this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				//isJPG&&
				return isLt2M;
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.editSoftText();
						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			findSoftText(){
				
			},
			editSoftText(){
				console.log(this.dto)
				let dto = this.dto;
				let datas = {
					access_token:this.$store.state.accToken,
					id: dto.id?dto.id:'',
					logo: dto.logo, 
					name: dto.name,
					summary: dto.summary, 
					productLabes: dto.productLabes.join(),
					receiveStartTime: dto.receiveStartTime,
					receiveEndTime:dto.receiveEndTime,
					websiteTypes: dto.websiteTypes.join(), 
					entranceLevel: dto.entranceLevel,
					channelTypes: dto.channelTypes.join(), 
					inclusionReference: dto.inclusionReference.join(),
					specialIndustrys: dto.specialIndustrys.join(), 
					integratedPortal: dto.integratedPortal.join(),
					baiduWeight: dto.baiduWeight,
					baiduNews: dto.baiduNews, 
					linkType: dto.linkType,
					imageNum: dto.imageNum,
					titleNum: dto.titleNum,
					needOrigin: dto.needOrigin,
					publishTime: dto.publishTime,
					publishTimeUnit: dto.publishTimeUnit,
					averageTime: dto.averageTime, 
					caseLink: dto.caseLink, 
					authType: dto.authType, 
					openCity: '050020',	//dto.openCity, 测试写死
					openCityStr:'广州',
					upUnderShelf: "0",
					remarkDesc: dto.remarkDesc, 
					basicPrice: dto.basicPrice, 
				}
				this.$api.req.saveSoftText(datas)
				.then(res=>{
					console.log(res);
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.container {
		padding-top: 20px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.inputw50 {
		width: 50%;
	}
</style>
